<template>
  <div class="form-list">
    <div class="left" v-for="(item,index) in list" :key="index">
      <div class="top-title">{{ item.title }}</div>
      <div class="box" v-for="(bItem,bIndex) in item.data" :key="bIndex">
        <div class="title">{{ bItem.title }}</div>
        <div class="input">
          <el-input v-model="bItem[bItem.key]" placeholder="请输入"></el-input>
        </div>
        <div class="button">
          <el-button type="info" size="mini">修改</el-button>
          <el-button type="primary" size="mini" @click="submitClick(bItem)">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'basic',
  data() {
    return {
      list:[
        {
          title:'技师端',
          data:[
            {
              title:'新订单提醒',
              key:'new'
            },
            {
              title:'退单提醒',
              key:'new'
            },
            {
              title:'换项目提醒',
              key:'new'
            },
            {
              title:'修改时间提醒',
              key:'new'
            },
            {
              title:'再来一单提醒',
              key:'new'
            },
            {
              title:'开单提醒',
              key:'new'
            },
            {
              title:'服务开始前5分钟提醒',
              key:'new'
            },
            {
              title:'服务结束前5分钟提醒',
              key:'new'
            }
          ]
        },
        {
          title:'管理端',
          data:[
            {
              title:'新订单提醒',
              key:'new'
            },
            {
              title:'退单提醒',
              key:'old'
            },
            {
              title:'换项目提醒',
              key:'new'
            },
            {
              title:'修改时间提醒',
              key:'new'
            },
            {
              title:'再来一单提醒',
              key:'new'
            },
            {
              title:'开单提醒',
              key:'new'
            },
          ]
        }
      ],
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  methods: {
    submitClick(bItem) {
      console.log('nnn',bItem)
    }
  }
}

</script>

<style lang="scss" scoped>
 ::v-deep .input {
  width: 53%;
  .el-input--medium .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
}

.form-list {
  display: flex;
  justify-content: space-around;

  .left {
    width: 45%;
    .top-title {
      text-align: center;
      font-size: 20px;
      font-weight: 500;
      letter-spacing: 0px;
      line-height: 28px;
      // height: 30px;
      // line-height: 30px;
      color: rgba(56, 56, 56, 1);
      margin: 20px;
    }

    .box {
      display: flex;
      margin-bottom: 20px;
      .title {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        // line-height: 22.4px;
              height: 30px;
      line-height: 30px;
        color: rgba(56, 56, 56, 1);
        width: 24%;
      }



      .button {
        display: flex;
        width: 20%;
        margin-left: 3%;
      }
    }
  }

  .right {
    width: 50%;
  }
}
</style>